<!-- 调拨入库 -->
<template>
  <div class="app-container">
    <el-form
      class="globalSerchFormStyle"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="110px"
      label-position="right"
    >
      <el-row style="margin-top: 15px">
        <el-col :span="6">
          <el-form-item
            label="调出门店"
            prop="outboundStationId"
            clearable
            size="small"
          >
            <el-select
              v-model="queryParams.outboundStationId"
              :clearable="true"
              filterable
              placeholder="请选择调出门店"
              style="width: 200px"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="单据编号"
            prop="recordsCode"
            clearable
            size="small"
          >
            <el-input
              style="width: 200px"
              v-model="queryParams.recordsCode"
              placeholder="请输入单据编号"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status" clearable size="small">
            <el-select
              v-model="queryParams.status"
              :clearable="true"
              filterable
              placeholder="请选择单据状态"
              style="width: 200px"
            >
              <el-option label="待入库" value="0"></el-option>
              <el-option label="已入库" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间" prop="createDatetimeRange">
            <el-date-picker
              v-model="createDatetimeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              style="width: 200px"
              :default-time="['00:00:00', '23:59:59']"
              @change="createDateTimeChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="6">
          <el-form-item label="入库时间" prop="outboundRepositoryDatetimeRange">
            <el-date-picker
              v-model="outboundRepositoryDatetimeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              style="width: 200px"
              :default-time="['00:00:00', '23:59:59']"
              @change="outboundRepositoryDateChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleQuery" size="mini"
          >查询</el-button
        >
      </el-col>
      <el-col style="padding-left: 10px" :span="1.5">
        <el-button type="primary" size="mini" @click="resetQuery" plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button @click="handleExport" size="mini" plain
          >导出</el-button
        ></el-col
      >
    </el-row>
    <el-table
      style="width: 100%"
      :data="warehouseList"
      v-loading="loading"
      header-align="left"
      border
    >
      <el-table-column type="index" label="序号" align="left" width="60" />
      <el-table-column
        label="单据编号"
        align="left"
        prop="recordsCode"
        width="150"
      />
      <el-table-column
        label="调拨商品总数"
        align="left"
        prop="commodityNum"
        width="100"
      />
      <el-table-column
        label="调出门店"
        align="left"
        prop="outboundStationName"
        width="110"
      />
      <el-table-column label="备注" align="left" prop="notes" />
      <el-table-column label="创建员" align="left" prop="createUserName" />
      <el-table-column label="操作员" align="left" prop="operatorName" />
      <el-table-column label="状态" align="left" prop="statusDesc" />
      <el-table-column
        label="入库商品总数"
        align="left"
        prop="storageCommodityNum"
      />
      <el-table-column label="创建时间" align="left" prop="createTime" />
      <el-table-column
        label="入库时间"
        align="left"
        prop="outboundRepositoryTime"
      />
      <el-table-column
        fixed="right"
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="130px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.statusDesc === '待入库'"
            @click="onEdit(scope.row.storageRecordsId)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.statusDesc === '待入库'"
            @click="onAdd(scope.row.storageRecordsId)"
            >入库</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="onDetails(scope.row.storageRecordsId)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />

    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="editDialogVisible" width="60%">
      <el-row class="row-div">
        <el-col :span="7"
          >调出门店：{{ outboundOrderDetail.outboundStationName }}</el-col
        >
        <el-col :span="7"
          >调入门店：{{ outboundOrderDetail.storageStationName }}</el-col
        >
        <el-col :span="10"
          >创建时间：{{ outboundOrderDetail.createTime }}</el-col
        >
      </el-row>
      <el-row class="row-div">
        <el-col :span="24">备注：{{ outboundOrderDetail.notes }}</el-col>
      </el-row>
      <el-form :model="outboundOrderDetail" ref="refDtoList">
        <div style="height: 289px; overflow: auto">
          <el-table
            :data="outboundOrderDetail.storageRecordsDetailsDtoList"
            border
            style="margin-bottom: 50px"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
            ></el-table-column>
            <el-table-column
              property="commodityName"
              label="商品名称"
            ></el-table-column>
            <el-table-column
              property="barCode"
              label="商品条码"
              width="150"
            ></el-table-column>
            <el-table-column property="categoryName" label="商品分类">
            </el-table-column>
            <el-table-column property="unit" label="单位"></el-table-column>
            <el-table-column
              property="inventoryOutQuantity"
              label="调入数量"
            ></el-table-column>
            <el-table-column
              property="inventoryQuantity"
              label="实际调入数量"
              width="160"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="'storageRecordsDetailsDtoList.' + scope.$index"
                  :rules="{
                    required: true,
                    validator: indexCurrentInventoryQuantityPass,
                    message: '请输入调拨数量',
                  }"
                >
                  <el-input-number
                    size="mini"
                    :precision="0"
                    v-model="scope.row.inventoryQuantity"
                    :min="0"
                    :max="scope.row.inventoryOutQuantity"
                    placeholder="请输入"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              property="salePrice"
              label="单价"
            ></el-table-column>
            <el-table-column
              property="totalPrice"
              label="总价"
              :formatter="formatterTotalPrice"
            ></el-table-column>
          </el-table>
        </div>
      </el-form>
      <div class="center-number">
        <div>数量：{{ quantity }}</div>
        <div>金额：￥{{ amount }}</div>
      </div>
      <div class="center-div">
        <el-button size="small" style="margin-right: 80px" @click="editClose"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="editModification"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <!-- 入库 -->
    <el-dialog title="入库" :visible.sync="addDialogVisible" width="60%">
      <el-row class="row-div">
        <el-col :span="7"
          >调出门店：{{ outboundOrderDetail.outboundStationName }}</el-col
        >
        <el-col :span="7"
          >调入门店：{{ outboundOrderDetail.storageStationName }}</el-col
        >
        <el-col :span="10"
          >创建时间：{{ outboundOrderDetail.createTime }}</el-col
        >
      </el-row>
      <el-row class="row-div">
        <el-col :span="24">备注：{{ outboundOrderDetail.notes }}</el-col>
      </el-row>
      <el-form :model="outboundOrderDetail" ref="refDtoList">
        <div style="height: 289px; overflow: auto">
          <el-table
            :data="outboundOrderDetail.storageRecordsDetailsDtoList"
            border
            style="margin-bottom: 50px"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
            ></el-table-column>
            <el-table-column
              property="commodityName"
              label="商品名称"
            ></el-table-column>
            <el-table-column
              property="barCode"
              label="商品条码"
              width="150"
            ></el-table-column>
            <el-table-column property="categoryName" label="商品分类">
            </el-table-column>
            <el-table-column property="unit" label="单位"></el-table-column>
            <el-table-column property="inventoryQuantity" label="调入数量">
            </el-table-column>
            <el-table-column
              property="salePrice"
              label="单价"
            ></el-table-column>
            <el-table-column
              property="totalPrice"
              label="总价"
              :formatter="formatterTotalPrice"
            ></el-table-column>
          </el-table>
        </div>
      </el-form>
      <div class="center-number">
        <div>数量：{{ quantity }}</div>
        <div>金额：￥{{ amount }}</div>
      </div>
      <div class="center-div">
        <el-button size="small" style="margin-right: 80px" @click="addClose"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="addModification"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailsDialogVisible" width="60%">
      <el-row class="row-div">
        <el-col :span="7"
          >调出门店：{{ outboundOrderDetail.outboundStationName }}</el-col
        >
        <el-col :span="7"
          >调入门店：{{ outboundOrderDetail.storageStationName }}</el-col
        >
        <el-col :span="8"
          >创建员：{{ outboundOrderDetail.createUserName }}</el-col
        >
      </el-row>
      <el-row class="row-div">
        <el-col :span="8"
          >单据编号：{{ outboundOrderDetail.recordsCode }}</el-col
        >
        <el-col :span="16"
          >创建时间：{{ outboundOrderDetail.createTime }}</el-col
        >
      </el-row>
      <el-row class="row-div">
        <el-col :span="24">备注：{{ outboundOrderDetail.notes }}</el-col>
      </el-row>
      <div style="height: 289px; overflow: auto">
        <el-table
          :data="outboundOrderDetail.storageRecordsDetailsDtoList"
          border
          style="margin-bottom: 50px"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column
            property="commodityName"
            label="商品名称"
          ></el-table-column>
          <el-table-column
            property="barCode"
            label="商品条码"
            width="150"
          ></el-table-column>
          <el-table-column
            property="categoryName"
            label="商品分类"
          ></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
          <!-- <el-table-column
            property="inventory"
            label="可用库存"
          ></el-table-column> -->
          <el-table-column
            property="inventoryQuantity"
            label="调入数量"
          ></el-table-column>
          <el-table-column property="salePrice" label="单价"></el-table-column>
          <el-table-column
            property="totalPrice"
            label="总价"
            :formatter="formatterTotalPrice"
          ></el-table-column>
        </el-table>
      </div>
      <div class="center-number">
        <div>数量：{{ quantity }}</div>
        <div>金额：￥{{ amount }}</div>
      </div>
      <div class="center-div">
        <el-button type="primary" size="small" style="margin-right: 80px"
          >导出</el-button
        >
        <el-button type="primary" size="small" @click="offDetails"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import Treeselect from "@riophae/vue-treeselect";
import { listEnterpriseStation } from "@/api/nonOil/putlntoStorage";
import {
  selectStorageRecordsList,
  updateStorageRecordsUpdate,
  selectStorageRecordsDetails,
  confirmStorageConfirm,
} from "@/api/nonOil/class";

export default {
  name: "TransferInto",
  components: { Treeselect },
  data() {
    return {
      //树形控件
      categoryOptions: [],
      // 油站
      stationList: [],
      // 创建时间
      createDatetimeRange: null,
      // 入库时间
      outboundRepositoryDatetimeRange: null,

      queryParams: {
        // 调出仓库/门店
        outboundStationId: null,

        // 单据编号
        recordsCode: null,
        // 状态
        status: null,
        // 创建时间
        createStartTime: null,
        createEndTime: null,
        // 入库时间
        outboundRepositoryStartTime: null,
        outboundRepositoryEndTime: null,

        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,

      //表格数据
      warehouseList: [],

      // 修改
      editDialogVisible: false,
      outboundOrderDetail: {},

      // 入库
      addDialogVisible: false,

      // 详情
      detailsDialogVisible: false,
      inventoryOutQuantity: 0,
    };
  },
  created() {
    this.getStationList();
    this.handleQuery();
  },
  methods: {
    // 格式化总价
    formatterTotalPrice(row, column) {
      let totalPrice;
      totalPrice = parseFloat(
        (row.inventoryQuantity * row.salePrice).toFixed(10)
      );
      return totalPrice;
    },

    // 请输入调拨数量列表校验
    indexCurrentInventoryQuantityPass(rule, value, callback) {
      if (this.outboundOrderDetail.storageRecordsDetailsDtoList.length) {
        const index = rule.field.substr(rule.field.length - 1, 1);
        if (
          this.outboundOrderDetail.storageRecordsDetailsDtoList[index]
            .inventoryOutQuantity > 0
        ) {
          callback();
        } else {
          callback(new Error("请输入调拨数量"));
        }
      }
    },

    // 查询油站
    getStationList() {
      const enterpriseId = this.presentEnterprise?.enterpriseId
        ? this.presentEnterprise.enterpriseId
        : null;
      listEnterpriseStation({ enterpriseId, status: "1" }).then((res) => {
        this.stationList = res;
      });
    },

    // 选择创建时间
    createDateTimeChange() {
      this.queryParams.createStartTime = this.createDatetimeRange
        ? this.createDatetimeRange[0]
        : null;
      this.queryParams.createEndTime = this.createDatetimeRange
        ? this.createDatetimeRange[1]
        : null;
    },

    // 选择入库时间
    outboundRepositoryDateChange() {
      this.queryParams.outboundRepositoryStartTime = this
        .outboundRepositoryDatetimeRange
        ? this.outboundRepositoryDatetimeRange[0]
        : null;
      this.queryParams.outboundRepositoryEndTime = this
        .outboundRepositoryDatetimeRange
        ? this.outboundRepositoryDatetimeRange[1]
        : null;
    },

    // 搜索
    handleQuery() {
      this.loading = true;
      selectStorageRecordsList(this.queryParams)
        .then((res) => {
          if (res.data) {
            this.total = res.data.total;
            this.warehouseList = res.data.list;
          } else {
            this.msgError(es.msg);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 重置
    resetQuery() {
      // 创建时间
      this.createDatetimeRange = null;
      this.queryParams.createStartTime = null;
      this.queryParams.createEndTime = null;
      // 入库时间
      this.outboundRepositoryDatetimeRange = null;
      this.queryParams.outboundRepositoryStartTime = null;
      this.queryParams.outboundRepositoryEndTime = null;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },

    // 导出
    handleExport() {},

    // 打开修改
    onEdit(storageRecordsId) {
      this.editDialogVisible = true;
      selectStorageRecordsDetails(storageRecordsId).then((res) => {
        this.outboundOrderDetail = cloneDeep(res.data);
      });
      this.$nextTick(() => {
        this.$refs.refDtoList.clearValidate();
      });
    },

    // 确认修改
    editModification() {
      this.$refs.refDtoList.validate((valid) => {
        if (valid) {
          updateStorageRecordsUpdate({
            storageRecordsId: this.outboundOrderDetail.storageRecordsId,
            storageRecordsUpdateDtoList:
              this.outboundOrderDetail.storageRecordsDetailsDtoList,
          }).then((res) => {
            if (res.code == 200) {
              this.editDialogVisible = false;
              this.handleQuery();
              this.msgSuccess("修改成功!");
            } else {
              this.msgError(es.msg);
            }
          });
        }
      });
    },

    // 退出修改
    editClose() {
      this.editDialogVisible = false;
    },

    // 打开入库
    onAdd(storageRecordsId) {
      this.addDialogVisible = true;
      this.$nextTick(() => {
        selectStorageRecordsDetails(storageRecordsId).then((res) => {
          this.outboundOrderDetail = cloneDeep(res.data);
          this.$refs.refDtoList.clearValidate();
        });
      });
    },

    // 确认入库
    addModification() {
      this.$refs.refDtoList.validate((valid) => {
        if (valid) {
          confirmStorageConfirm({
            recordsCode: this.outboundOrderDetail.recordsCode,
            storageRecordsId: this.outboundOrderDetail.storageRecordsId,
            storageRecordsUpdateDtoList:
              this.outboundOrderDetail.storageRecordsDetailsDtoList,
            storageStationId: this.outboundOrderDetail.storageStationId,
          }).then((res) => {
            if (res.code == 200) {
              this.addDialogVisible = false;
              this.handleQuery();
              this.msgSuccess("入库成功!");
            } else {
              this.msgError(es.msg);
            }
          });
        }
      });
    },

    // 退出入库
    addClose() {
      this.addDialogVisible = false;
    },

    // 详情
    onDetails(storageRecordsId) {
      this.detailsDialogVisible = true;
      selectStorageRecordsDetails(storageRecordsId).then((res) => {
        this.outboundOrderDetail = res.data;
      });
    },

    // 关闭详情
    offDetails() {
      this.detailsDialogVisible = false;
    },
  },
  computed: {
    quantity() {
      let wadake = 0;
      if (this.outboundOrderDetail.storageRecordsDetailsDtoList) {
        if (this.outboundOrderDetail.storageRecordsDetailsDtoList.length) {
          this.outboundOrderDetail.storageRecordsDetailsDtoList.forEach(
            (item) => {
              wadake = wadake + item.inventoryQuantity;
            }
          );
        }
        return wadake;
      }
    },
    amount() {
      let wadake = 0;
      if (this.outboundOrderDetail.storageRecordsDetailsDtoList) {
        if (this.outboundOrderDetail.storageRecordsDetailsDtoList.length) {
          this.outboundOrderDetail.storageRecordsDetailsDtoList.forEach(
            (item) => {
              wadake =
                wadake +
                parseFloat(
                  (item.inventoryQuantity * item.salePrice).toFixed(10)
                );
              wadake = parseFloat(wadake.toFixed(3));
            }
          );
        }
        return wadake;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.row-div {
  font-size: 15px;
  margin-bottom: 20px;
}
.center-number {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  line-height: 40px;
  margin: 30px 0px;
  background-color: #f1f1f1;
  font-size: 16px;
}
.center-div {
  text-align: center;
}
.app-container {
  .swich {
    ::v-deep.el-switch__core {
      height: 30px;
      border-radius: 12.5px;
    }

    ::v-deep .el-switch__core:after {
      top: 6px;
    }

    ::v-deep .el-switch__label * {
      position: absolute;
      right: 35px;
      top: 2px;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
